<template>
    <div class="alarmDetail zy-content">
        <div class="searchBox">
            <Form label-position="right" :label-width="100" class="search-form">
                <Row>
                    <Col span="5">
                        <FormItem label="所属层级：">
                            <Cascader :data="hierarchyList" v-model="value1" @on-change="pushHierarchy" change-on-select></Cascader>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="设备：">
                            <Select filterable
                                    v-model="paramsList.deviceId"
                                    :remote-method="remoteMethod1"
                                    :loading="loading1"
                                    clearable
                                    :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="item of equipmentList" :value="item.deviceId" :key="item.deviceId">{{item.deviceNo +'-'+item.deviceName +'-'+item.deviceMId}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="日期：">
                            <DatePicker type="daterange" v-model="timeList" split-panels :placeholder="`${$t('common.selectInfo')}`" :clearable='false'></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="4" align="center">
                        <Button type="primary" @click="changeNum()" v-has="'dmsDeviceAlarmDetail'">{{$t('common.Query')}}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btns clear">
            <span  class="creatBtnright" @click="exportTemplateClick" v-has="'dmsDeviceAlarmDetailExport'">
                <span><Icon type="ios-cloud-download-outline" /></span>
                <span class="rightbtn">{{$t('common.Export')}}</span>
            </span>
        </div>
        <div class="tableContent">
            <Table :columns="columns" :data="dataArr"></Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
    </div>
</template>

<script>
    import fileDownload from 'js-file-download'
    export default {
        name: "alarmDetail",
        components: {},
        data(){
            return{
                timeList:[
                    this.$moment(new Date()).subtract(2, "days").format('YYYY-MM-DD'),
                    this.$moment(new Date()).format('YYYY-MM-DD')
                ],
                paramsList:{

                },
                equipmentList:[],
                loading1:false,
                pageNum:1,
                pageSize:10,
                total:0,
                columns: [
                    {
                        title: '厂区',
                        key: 'factoryName',
                        align: 'center'
                    },
                    {
                        title: `${ this.$t('maintenance.EquipmentNo') }`,
                        key: 'deviceMId',
                        align: 'center'
                    },
                    {
                        title: `${ this.$t('common.machineno') }`,
                        key: 'deviceNo',
                        align: 'center'
                    },
                    {
                       title: `${ this.$t('maintenance.EquipmentName') }`,
                        key: 'deviceName',
                        align: 'center'
                    },
                    {
                        title: '持续时长',
                        key: 'duration',
                        align: 'center'
                    },
                    {
                        title: '开始时间',
                        key: 'startTime',
                        align: 'center'
                    },
                    {
                        title: '结束时间',
                        key: 'endTime',
                        align: 'center'
                    },
                    {
                        title: '报警代码',
                        key: 'alarmCode',
                        align: 'center'
                    },
                    {
                        title: '报警描述',
                        key: 'alarmMessage',
                        align: 'center'
                    },

                ],
                dataArr: [],
                pageSizeOption: [10,20,30,40],
                hierarchyList:[],
                value1:[],
            }
        },
        mounted(){
            this.getHierarchy();
            this.searchList();
        },
        methods:{
            getEquipmentValue(device){
                this.axios({
                    method: 'get',
                    url: '/dms/dmsDevice/getDeviceDetail',
                    params:{
                        deviceMIdOrNo:device,
                        hierarchyCode:this.paramsList.hierarchyCode,
                    }
                }).then(res => {
                    if(res.code == 200){
                        this.equipmentList =res.data;
                    }
                })
            },
            remoteMethod1(query) {
                if (query !=='') {
                    this.loading1 = true;
                    setTimeout(() => {
                        this.loading1 = false;
                        this.getEquipmentValue(query)   //以输入的设备名去查询
                    }, 200);
                } else {
                    this.equipmentList = [];
                }
            },
            getHierarchy(){
                this.axios({
                    method: 'get',
                    url: '/basic/organization/findListByToken'
                }).then(res => {
                    if(res.code == 200){
                        this.hierarchyList = this.getHierarchyByMachining(res.data)
                    }
                })
            },
            getHierarchyByMachining(arr){
                arr.forEach((item) => {
                    item['value'] = item.id;
                    item['label'] = item.name;
                    if (item.children.length >0){
                        this.getHierarchyByMachining(item.children)
                    }
                })
                return arr;
            },
            pushHierarchy(value,selectValue){
                if(selectValue.length >0){
                    this.paramsList.hierarchyCode = selectValue[selectValue.length-1].code;
                }else{
                    this.paramsList.hierarchyCode = ''
                }
            },
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.paramsList) {
                  if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                  }
                }
                if(this.timeList[1]&&(this.$moment(this.timeList[1])-this.$moment(this.timeList[0]))/(24*3600*1000)<=30){
                    params.startTime = this.$moment(this.timeList[0]).format('YYYY-MM-DD 00:00:00')
                    params.endTime = this.$moment(this.timeList[1]).format('YYYY-MM-DD 23:59:59')
                }else{
                    this.$Message.warning(({content:"日期间隔不能超过31天",duration:6,closable:true}));
                    return false;
                }
                this.axios({
                    method: 'get',
                    url: '/dms/dmsDevice/alarmDetail',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                       this.dataArr = res.data.list
                       this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            //导出
            exportTemplateClick() {
                let params = {};
                for (let key in this.paramsList) {
                  if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                  }
                }
                if(this.timeList[1]&&(this.$moment(this.timeList[1])-this.$moment(this.timeList[0]))/(24*3600*1000)<=30){
                    params.startTime = this.$moment(this.timeList[0]).format('YYYY-MM-DD 00:00:00')
                    params.endTime = this.$moment(this.timeList[1]).format('YYYY-MM-DD 23:59:59')
                }else{
                    this.$Message.warning(({content:"日期间隔不能超过31天",duration:6,closable:true}));
                    return false;
                }
                const filName = '报警明细'
                this.axios({
                    method: 'get',
                    url: '/dms/dmsDevice/alarmDetailExport',
                    responseType: 'blob',
                    params: params
                }).then(res => {
                    fileDownload(res, filName + '.xlsx')
                })
            },

        }
    }
</script>

<style scoped lang="scss">
    .alarmDetail{

    }
</style>

<style lang="scss">

</style>
